<template>
  <div class="chart_container_wrap">
    <div class="chart" ref="chartRef"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import setLineOption from "./lineOption";
const lineData = {
  0: [1696996038, 0.5],
  1: [1696996638, 0.3],
  2: [1696997238, 0.3],
  3: [1696997838, 0.6],
  4: [1696998438, 0.2],
  5: [1696999038, 0.6],
  6: [1696999638, 0],
  7: [1697000238, 0],
  8: [1697000838, 0],
  9: [1697001438, 0],
  10: [1697002038, 0],
  11: [1697002638, 0],
  12: [1697003238, 0],
  13: [1697003838, 0],
  14: [1697004438, 0],
  15: [1697005038, 0],
  16: [1697005638, 0],
  17: [1697006238, 0],
  18: [1697006838, 0],
  19: [1697007438, 0],
  20: [1697008038, 0],
  21: [1697008638, 0],
  22: [1697009238, 0],
  23: [1697009838, 0],
  24: [1697010438, 0],
  25: [1697011038, 0],
  26: [1697011638, 0],
  27: [1697012238, 0],
  28: [1697012838, 0],
  29: [1697013438, 0],
  30: [1697014038, 0],
  31: [1697014638, 0],
  32: [1697015238, 0],
  33: [1697015838, 0],
  34: [1697016438, 0],
  35: [1697017038, 0],
  36: [1697017638, 0],
  37: [1697018238, 0],
  38: [1697018838, 0],
  39: [1697019438, 0],
  40: [1697020038, 0],
  41: [1697020638, 0],
  42: [1697021238, 0],
  43: [1697021838, 0],
  44: [1697022438, 0],
  45: [1697023038, 0],
  46: [1697023638, 0],
  47: [1697024238, 0],
  48: [1697024838, 0],
  49: [1697025438, 0],
  50: [1697026038, 0],
  51: [1697026638, 0],
  52: [1697027238, 0],
  53: [1697027838, 0],
  54: [1697028438, 0],
  55: [1697029038, 0],
  56: [1697029638, 0],
  57: [1697030238, 0],
  58: [1697030838, 0],
  59: [1697031438, 0],
  60: [1697032038, 0],
  61: [1697032638, 0],
  62: [1697033238, 0],
  63: [1697033838, 0],
  64: [1697034438, 0],
  65: [1697035038, 0],
  66: [1697035638, 0],
  67: [1697036238, 0],
  68: [1697036838, 0],
  69: [1697037438, 0],
  70: [1697038038, 0],
  71: [1697038638, 0],
  72: [1697039238, 0],
  73: [1697039838, 0],
  74: [1697040438, 0],
  75: [1697041038, 0],
  76: [1697041638, 0],
  77: [1697042238, 0],
  78: [1697042838, 0],
  79: [1697043438, 0],
  80: [1697044038, 0],
  81: [1697044638, 0],
  82: [1697045238, 0],
  83: [1697045838, 0],
  84: [1697046438, 0],
  85: [1697047038, 0],
  86: [1697047638, 0],
  87: [1697048238, 0],
  88: [1697048838, 0],
  89: [1697049438, 0],
  90: [1697050038, 0],
  91: [1697050638, 0],
  92: [1697051238, 0],
  93: [1697051838, 0],
  94: [1697052438, 0],
  95: [1697053038, 0],
  96: [1697053638, 0],
  97: [1697054238, 0],
  98: [1697054838, 0],
  99: [1697055438, 0],
  100: [1697056038, 0],
  101: [1697056638, 0],
  102: [1697057238, 0],
  103: [1697057838, 0],
  104: [1697058438, 0],
  105: [1697059038, 0],
  106: [1697059638, 0],
  107: [1697060238, 0],
  108: [1697060838, 0],
  109: [1697061438, 0],
  110: [1697062038, 0],
  111: [1697062638, 0],
  112: [1697063238, 0],
  113: [1697063838, 0],
  114: [1697064438, 0],
  115: [1697065038, 0],
  116: [1697065638, 0],
  117: [1697066238, 0],
  118: [1697066838, 0],
  119: [1697067438, 0],
  120: [1697068038, 0],
  121: [1697068638, 0],
  122: [1697069238, 0],
  123: [1697069838, 0],
  124: [1697070438, 0],
  125: [1697071038, 0],
  126: [1697071638, 0],
  127: [1697072238, 0],
  128: [1697072838, 0],
  129: [1697073438, 0],
  130: [1697074038, 0],
  131: [1697074638, 0],
  132: [1697075238, 0],
  133: [1697075838, 0],
  134: [1697076438, 0],
  135: [1697077038, 0],
  136: [1697077638, 0],
  137: [1697078238, 0],
  138: [1697078838, 0],
  139: [1697079438, 0],
  140: [1697080038, 0],
  141: [1697080638, 0],
  142: [1697081238, 0],
  143: [1697081838, 0],
};
let lineChart: any;
const chartRef = ref(null);
/**动态变化echart大小 */
const resizeEcharts = () => {
  lineChart.resize();
};
onMounted(() => {
  lineChart = echarts.init(chartRef.value);
  lineChart.setOption(setLineOption(lineData));
  /**监听窗口变化，改变echarts大小 */
  window.addEventListener("resize", resizeEcharts);
});
/**移除组件前将事件移除 */
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeEcharts);
});
</script>
<style scoped lang="less">
.chart_container_wrap {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
